<template>
    <div>

        <p>{{address}}<p>
        <p>{{address1}}<p>
        <p>{{address2}}<p>
        <div id="map" style="height: 500px; width: 500px;">
        </div>
    </div>
</template>

imp
<script>
    // import axios from 'axios';
    /* eslint-disable */
    import BMap from 'BMap'
    import wx from "weixin-js-sdk";

    export default {
        name: "transpage",
        data () {
          return {
              message: "1111",
              address: '默认位置',
              address1: '',
              address2: ''
          }
        },
        mounted() {
            let me = this;
            // this.message = this.$route.query.code;
            // axios.get('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx47bcab58ea28895f&redirect_uri=http://29x60v2980.picp.vip&response_type=code&scope=snsapi_base&state=#wechat_redirec')
            //     .then(function(res){
            //         // this.goodsList = res.data;
            //         console.log(res);
            //     }).catch(function (error) {
            //         console.log(error);
            //     });
            // alert(location.href.split('#')[0]);
            // var tmp = Date.parse(new Date());
            //
            // var noncestr='Wm3WZYTPz0wzccXa'
            // var jsapi_ticket='sM4AOVdWfPE4DxkXGEs8VIRXAmOeVQkuD7jRAVXQY7Zk0SQubq2O59NfxRe-otiOIyLbw2v7B5N4FQbOJditHQ'
            // var timestamp=tmp / 1000;
            // var url='test.shanghaibuda.com'
            //
            // var pm='jsapi_ticket='+jsapi_ticket+'&noncestr='+noncestr+'&timestamp='+timestamp+'&url='+url;
            //
            // console.log(pm);

            // this.$wx.getLocation({
            //     type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            //     success: function (res) {
            //         // var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
            //         // var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            //         // var speed = res.speed; // 速度，以米/每秒计
            //         // var accuracy = res.accuracy; // 位置精度
            //         console.log(res);
            //         this.message=res.latitude;
            //     },
            //     fail: function(res) {
            //         console.log(JSON.stringify(res));
            //         this.message=JSON.stringify(res);
            //     }
            // });
            wx.config({
                beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'wx47bcab58ea28895f', // 必填，公众号的唯一标识
                timestamp: 1613814910, // 必填，生成签名的时间戳
                nonceStr: 'ec08e155-3858-4da6-9ddb-e99171d511af', // 必填，生成签名的随机串
                signature: 'd7a96d3f1a6fc25327f9b09d6cc7597ded4fb177',// 必填，签名，见附录1
                // 必填，需要使用的JS接口列表，所有JS接口列表见官方js接口
                // 这里配置获取地理位置所需要的接口权限
                jsApiList: [
                    'openLocation',
                    'getLocation'
                ]
            });

            wx.ready(function(){
                console.log("ready");
                // alert(location.href.split('#')[0]);
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                wx.getLocation({
                  type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                  success: function (res) {
                    this.latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
                    this.longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
                    // var speed = res.speed // 速度，以米/每秒计
                    var accuracy = res.accuracy // 位置精度
                    console.log('纬度：' + this.latitude + '经度：' + this.longitude + 'accuracy：' + accuracy)
alert("纬度：" + res.latitude + ",经度：" + res.longitude)
                      me.createMap(res.longitude, res.latitude);
                  },
                  fail: function(res) {
                    console.log(JSON.stringify(res))
                  }
                })
            });

            wx.error(function(res){
                console.log(res);
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

            });
        },
        methods: {
            createMap(lng, lat) {
                /* eslint-disable */
                var that = this
                // 创建Map实例
                var map = new BMap.Map('map')
                // 初始化地图,设置中心点坐标和地图级别
                // map.centerAndZoom(new BMap.Point(121.49897906003335, 31.252858810301676), 19)
                map.centerAndZoom("上海", 19);
                //添加地图类型控件
                map.addControl(new BMap.MapTypeControl({
                    mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
                }))
                // 设置地图显示的城市 此项是必须设置的
                // map.setCurrentCity('上海')
                //开启鼠标滚轮缩放
                map.enableScrollWheelZoom(true)
                /* eslint-enable */
                var geoc = new BMap.Geocoder()
                // var geolocation = new BMap.Geolocation()

//         geoc.getPoint('上海市浦东新区川沙南市街42弄1号', function(point){
//           console.log('111')
//           console.log(point)
//           if(point){
//             map.centerAndZoom(point, 16);
//             map.addOverlay(new BMap.Marker(point, {title: '上海市浦东新区川沙南市街42弄1号'}))
//           }else{
//             alert('您选择的地址没有解析到结果！');
//           }
//         }, '上海市')
// return;
                var translateCallback = function (data) {
                    // var marker = new BMap.Marker(point);
                    // map.addOverlay(marker);
                    // map.panTo(point.points[0]);
                    // map.setCenter(point.points[0]);
                    // console.log(point.points)
                    if (data.status === 0) {
                        var marker = new BMap.Marker(data.points[0]);
                        map.addOverlay(marker);
                        map.panTo(data.points[0]);
                        var label = new BMap.Label("转换后的百度坐标（正确）", {offset: new BMap.Size(20, -10)});
                        marker.setLabel(label); //添加百度label
                        map.setCenter(data.points[0]);

                        that.address1 = '您的位置2：' + data.points[0].lng + ',' + data.points[0].lat;
                                geoc.getLocation(data.points[0], function (rs) {
                                    // console.log('1111')
                                    // console.log(rs)
                                    var addComp = rs.addressComponents
                                    // mk.setPosition(r.point)
                                    // mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                                    that.address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
                                    that.address2 = rs.surroundingPois[0].title
                                })
                    }

                    // geoc.getLocation(point.points[0], function (rs) {
                    //   console.log('1111')
                    //   console.log(rs)
                    //   // var addComp = rs.addressComponents
                    //   // mk.setPosition(r.point)
                    //   // mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    //   // that.address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
                    //   that.address = rs.address;
                    // })
                }

                var centerPointer = new BMap.Point(lng, lat);
                // that.address1 = '您的位置：' + r.point.lng + ',' + r.point.lat;
                console.log(centerPointer)

                var convertor = new BMap.Convertor();
                var pointArr = [];
                pointArr.push(centerPointer);
                convertor.translate(pointArr, 1, 5, translateCallback)


                // geolocation.getCurrentPosition(function (r) {
                //     /* eslint-enable */
                //
                //     if (this.getStatus() === BMAP_STATUS_SUCCESS) {
                //         // console.log(r)
                //         that.address = '您的位置1：' + r.point.lng + ',' + r.point.lat;
                //
                //         // var centerPointer = new BMap.Point(r.point.lng,r.point.lat);
                //         // // that.address1 = '您的位置：' + r.point.lng + ',' + r.point.lat;
                //         // console.log(centerPointer)
                //         //
                //         // var convertor = new BMap.Convertor();
                //         // var pointArr = [];
                //         // pointArr.push(centerPointer);
                //         // convertor.translate(pointArr, 1, 5, translateCallback)
                //         // convertor.translate(pointArr, COORDINATES_WGS84, COORDINATES_BD09, translateCallback)
                //
                //         var mk = new BMap.Marker(r.point, {enableDragging: true})
                //         map.addOverlay(mk)
                //         mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                //         map.panTo(r.point)
                //         var label = new BMap.Label("转换后的百度坐标（正确）", {offset: new BMap.Size(20, -10)});
                //         mk.setLabel(label); //添加百度label
                //
                //         map.setCenter(r.point);
                //
                //         // console.log('您的位置：' + r.point.lng + ',' + r.point.lat)
                //
                //
                //         var pt = r.point
                //         // console.log(pt)
                //         // var convertor = new BMap.Convertor();
                //         // var pointArr = [];
                //         // pointArr.push(pt);
                //         // convertor.translate(pointArr, 1, 5, translateCallback)
                //
                //
                //         // pt.lng = pt.lng - 0.0002;
                //         // pt.lat = pt.lat + 0.0060;
                //         that.address1 = '您的位置2：' + r.point.lng + ',' + r.point.lat;
                //         geoc.getLocation(pt, function (rs) {
                //             // console.log('1111')
                //             // console.log(rs)
                //             var addComp = rs.addressComponents
                //             // mk.setPosition(r.point)
                //             // mk.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                //             that.address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
                //             that.address2 = rs.surroundingPois[0].title
                //         })
                //     } else {
                //         // console.log('failed' + this.getStatus())
                //     }
                // }, {enableHighAccuracy: true})
                //
            },
        }
    }
</script>

<style scoped>

</style>
